<!--
 * @Author: fisher
 * @Date: 2024-01-15 16:04:44
 * @LastEditTime: 2024-01-30 15:15:46
 * @LastEditors: fisher luthor-li@qq.com
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\map\index.vue
-->
<template>
  <div class="mapContainer">
    <div id="CesiumMap" />
    <!-- 头部 -->
    <Header class="header"></Header>
    <!-- 工具栏 -->
    <toolBar class="toolBar" />
    <!-- 退出按钮 -->
    <fks-button class="backBtn" type="primary" @click="back2Task">退出</fks-button>
  </div>
</template>

<script>
import {
  initMap,
  setView2Obj,
  loadTilesAction,
  removeLoadTilesAction
} from '../utils/map/common.js'
import { load3dtilesByUrl } from '../utils/map/load.js'
import toolBar from './layout/toolbar/index.vue'
import Header from './layout/header/index.vue'
export default {
  //import引入组件才能使用
  components: { toolBar, Header },
  props: {},
  data() {
    return {
      waitSceneReady: 3000
    }
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {},
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {
    initMap()
    setTimeout(() => {
      this.loadDefault3dtiles()
    }, this.waitSceneReady)
  },
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {},
  // 方法集合
  methods: {
    loadDefault3dtiles() {
      const helper = loadTilesAction((res) => {
        // console.log(res)
        if (res == 0) {
          removeLoadTilesAction(helper)
        }
      })
      load3dtilesByUrl('/3dtiles/cesium/shajing_rvt_3dtiles/tileset.json').then((res) => {
        setView2Obj(res)
      })
    },
    back2Task() {
      if (window.viewer) {
        window.viewer.destroy()
        window.viewer = undefined
      }
      this.$router.push({
        path: '/tasks'
      })
    }
  } //如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style lang="scss" scoped>
.mapContainer {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#CesiumMap {
  width: 100%;
  height: 100%;
}
.backBtn {
  position: absolute;
  z-index: 999;
  bottom: 30px;
  right: 30px;
}

.header {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
}
.toolBar {
  position: absolute;
  z-index: 999;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
